<template>
	<view>
		<u-navbar :bgColor="bgColor" title="课程详情" :autoBack="true" :titleStyle="titleStyle" leftIconColor="#E6A5B4">

		</u-navbar>
		<view class="bgV">
			<scroll-view scroll-y="true" @scroll="onListenerScroll">
				<view class="topIv">
					<u-swiper :list="detailsData.images" :autoplay="true" indicatorStyle="right: 20px" height="450rpx"
						radius="0" circular>
					</u-swiper>
				</view>

				<view class="centerV">
					<view class="titleV">
						<view class="titleTv">{{detailsData.title}}</view>
						<!-- <image class="guanzhuIv" src="../../static/public/collection.svg"></image>
						<view class="shareV">
							<image class="shareIv" src="../../static/public/share.svg"></image>
							<view class="shareTv">分享有礼</view>
						</view> -->
					</view>
					<view class="timeV">
						<image class="timeIv" src="../../static/public/time.svg"></image>
						<view class="timeTv">教练：{{detailsData.coach_name}}</view>
					</view>
					<view class="gpsV">
						<image class="gpsIv" src="../../static/public/time.svg"></image>
						<view class="gpsTv">时间：{{detailsData.time}}</view>
					</view>
					<view class="gpsV">
						<image class="gpsIv" src="../../static/public/jiage.svg"></image>
						<view class="gpsTv">总价：{{jiage}}元</view>

					</view>
					<view class="jieshaoV">
						<view class="jieshaoTitle">课程须知</view>
						<view class="jieshaoTv">{{detailsData.xuzhi}}
						</view>
					</view>

					<view class="jieshaoV">
						<view class="jieshaoTitle">退课须知</view>
						<view class="jieshaoTv">{{detailsData.tui_xuzhi}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottomV">
			<view class="moneyV">
				<view class="moneyTv1">待支付</view>
				<view class="moneyTv2">¥{{jiage}}</view>
			</view>
			<view class="timeCardTv" @click="onTimeCardClick()">
				时效卡支付
			</view>
			<view class="addOreder" @click="onAddClick()">微信支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				id: null,
				detailsData: null,
				singMoney: 0, //单个价格
				jiage: "0", //总价格
				renshuPos: 0, //人数索引
				renshuNum: 0, //总人数
				scrollTop: 0,
				bgColor: "#00000000",
			}
		},
		onReady() {
			let hei = uni.getSystemInfoSync().statusBarHeight;
			this.scrollTop = hei;
		},
		onLoad(op) {
			this.id = op.id;
			this.getOnlineDetail()
		},
		methods: {
			getOnlineDetail() {
				this.$api.getOnlineDetail({
					id: this.id
				}).then((res) => {
					this.detailsData = res;
					this.jiage = res.price;

				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onTimeCardClick() { //时效卡支付
				this.$api.addComboOrder({
					id: this.id,
					nums: this.renshuPos
				}).then((res) => {
					this.onTimePay(res.order_id)
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onTimePay(orderId){
				uni.showLoading({})
				this.$api.getCardPay({
					order_id: orderId,
				}).then((res) => {
					uni.hideLoading();
					uni.$u.toast("支付成功");
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 900)
				}).catch((e) => {
					uni.hideLoading();
					uni.$u.toast(e.msg === undefined ? "支付失败" : e.msg)
				})
			},
			onAddClick() { //立即预约
				this.$api.onlineAdd({
					id: this.id
				}).then((res) => {
					this.pay(res.order_id)
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			pay(orderid) {
				this.$api.miNiPay({
					order_id: orderid,
				}).then((res) => {
					this.payOrder(res,orderid);
				}).catch((e) => {
					uni.$u.toast("支付失败");
				})
			},
			payOrder(payData,orderid) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: function(res) {
						this.paySuccess(orderid)
					},
					fail: function(err) {
						uni.$u.toast("支付失败");
					}
				})
			},
			paySuccess(id) {
				this.$api.onlinePaySuccess({
					order_id: id,
				}).then((res) => {
					uni.$u.toast("支付成功");
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						});
					}, 900)
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onListenerScroll: function(value) {
				if (value.detail.scrollTop > this.scrollTop) {
					this.bgColor = "#FFFFFF"
				} else {
					this.bgColor = "#00000000"
				}
			},
		}
	}
</script>

<style lang="scss">
	.bgV {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.topIv {
			width: 100%;
			height: 450rpx;
			background-color: #ff0000;
		}

		.centerV {
			width: 100%;
			height: 100%;
			flex: 1;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			box-sizing: border-box;
			margin-top: -20rpx;
			z-index: 9;
			background-color: #FFFFFF;

			.titleV {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding-top: 50rpx;
				box-sizing: border-box;

				.titleTv {
					color: #e8e8e8;
					font-size: 36rpx;
					max-width: 450rpx;
					min-width: 450rpx;
				}

				.guanzhuIv {
					width: 32rpx;
					height: 32rpx;
				}

				.shareV {
					display: flex;
					align-items: center;

					.shareIv {
						width: 32rpx;
						height: 32rpx;
					}

					.shareTv {
						margin-left: 5rpx;
						color: #979797;
						font-size: 28rpx;
					}
				}
			}

			.timeV {
				display: flex;
				align-items: center;
				margin-top: 60rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.timeIv {
					width: 30rpx;
					height: 30rpx;
				}

				.timeTv {
					color: #e8e8e8;
					font-size: 32rpx;
					margin-left: 23rpx;
				}
			}

			.gpsV {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				padding-left: 30rpx;
				padding-right: 10rpx;

				.gpsIv {
					width: 30rpx;
					height: 30rpx;
				}

				.gpsTv {
					flex: 1;
					color: #e8e8e8;
					font-size: 32rpx;
					margin-left: 23rpx;
				}

			}

			.jieshaoV {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-right: 30rpx;
				background: #1F1F1F;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.jieshaoTitle {
					color: #fff;
					font-size: 32rpx;
					padding-bottom: 30rpx;
				}

				.jieshaoTv {
					font-size: 28rpx;
					color: #8d8d8d;
				}

			}
		}
	}

	.bottomV {
		display: flex;
		height: 98rpx;
		align-items: center;
		z-index: 10;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		background-color: #FFFFFF;
		
		.timeCardTv {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #CEF7434C;
			font-size: 32rpx;
			font-weight: 500;
			color: #CEF743;
		}
		
		.moneyV {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;

			.moneyTv1 {
				color: #fff;
				font-size: 28rpx;
			}

			.moneyTv2 {
				color: #E6A5B4;
				font-size: 36rpx;
				margin-left: 30rpx;
			}
		}


		.addOreder {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #CEF743;
			font-size: 32rpx;
			color: #333737;
		}
	}
</style>
